<template>
  <div>
    <product-block
      title="横向一列紧凑式"
      desc="标题描述不超过12个字符"
      mode="row-image"
      :border="true"
      style="margin: 10px 0"
    />

    <product-block
      title="横向一列紧凑式"
      desc="标题描述不超过12个字符"
      mode="row-text"
      :border="true"
      style="margin: 10px 0"
    />

    <product-block
      title="纵向阅读一列"
      desc="标题描述不超过12个字符"
      mode="col-button"
      :customStyle="{ backgroundColor: '#eff2f5' }"
      style="margin: 10px 0"
    />

    <product-block
      title="纵向阅读一列"
      desc="标题描述不超过12个字符"
      mode="col-text"
      :customStyle="{ backgroundColor: '#eff2f5' }"
      style="margin: 10px 0"
    />

    <info-block title="横向阅读一列" desc="标题描述不超过12个字符" mode="row-image" style="margin: 10px 0" />

    <info-block title="横向阅读一列" desc="标题描述不超过12个字符" mode="row-talk" style="margin: 10px 0" />
  </div>
</template>

<script>
import ProductBlock from '@/components/Product/Block'
import InfoBlock from '@/components/Info/Block'

export default {
  components: {
    ProductBlock,
    InfoBlock
  }
}
</script>